<script setup lang="ts">
// 接受2个参数，日期，时间范围
// 1个数据双向绑定，绑定的是选中咨询师的排班ID

import {availableTeacher} from "@/http/reservation/reservation";
import {ref, watch} from "vue";
import {teacherContent} from "@/http/home";
import {useRouter} from "vue-router";

const props = defineProps({
    date: String,
    timePeriod: Object
})

const teacherList = ref([])
teacherContent({pageNum:1,pageSize:10}
).then(res => {
    if (res.code === 200) {
        teacherList.value = res.rows
    }
})

function getTeacher() {
    availableTeacher({
        date: `${props.date}`,
        startTime: `${props.timePeriod.startTime}`,
        endTime: `${props.timePeriod.endTime}`
    }).then(res => {
        if (res.code == 200) {
            teacherList.value = res.data
        }
    })
}

// 每次切换的时候请求讲师列表
watch(() => props.timePeriod, () => {
    // 初始化讲师的列表
    if (props.timePeriod) {
        getTeacher()
    }
})

const schedulingId = defineModel()
function selectTeacher(item) {
    if (item.schedulingId) {
        schedulingId.value = item.schedulingId
    } else {
        alert('请先选择时间段')
    }
}

let baseUrl = 'http://192.168.5.120:8090'
// 点击跳转到教师详情
const router = useRouter()

function jumpTeacherDetail(item) {
    router.push({
        path: '/teacherDetail',
        query: {id: item.teacherId}
    })
}
</script>

<template>
    <div>
        <div class="chooseCounselor">
            <div class="title">
                <van-icon name="friends-o" size="20" style="margin-right: 3px"/>
                <span>选择咨询师</span>
            </div>
            <div class="allTeacher">
                <div class="eachTeacher" v-for="(item,index) in teacherList" :key="index"
                     @click="selectTeacher(item)"
                     :style="{'border': item.schedulingId === schedulingId ? '1px solid #9e75f5':''}">
                    <div class="pic">
                        <img :src="baseUrl+item.avatar" alt="">
                    </div>
                    <div class="name">{{ item.teacherName }}</div>
                    <button @click="jumpTeacherDetail(item)">查看</button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.chooseCounselor {
  width: 90%;
  margin: 0 auto;

  .allTeacher {
    width: 100%;
    white-space: nowrap;
    overflow: auto;
    display: flex;
    justify-content: space-between;
    margin: 2vh 10px;

    .eachTeacher {
      border-radius: 10px;
      margin-right: 15px;
      height: 25vh;
      padding: 20px;
      width: 38%;
      background-color: white;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      flex-wrap: wrap;
      justify-content: space-evenly;
      text-align: center;

      .pic {
        height: 7vh;
        width: 50%;
        margin: 0 auto;

        img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }

      button {
        width: 65%;
        margin: 0 auto;
        border: none;
        height: 4vh;
        border-radius: 2vh;
        color: #7246c5;
        background-color: #ECE2F8;
      }
    }
  }
}
</style>